﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGauge directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            // gauge's settings.
            $scope.gaugeSettings = {
                ranges: [{ startValue: 0, endValue: 130, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
                         { startValue: 130, endValue: 180, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
                         { startValue: 180, endValue: 220, style: { fill: '#e53d37', stroke: '#e53d37' }, startDistance: 0, endDistance: 0 }],
                cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb' } },
                border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
                ticksMinor: { interval: 5, size: '5%' },
                ticksMajor: { interval: 20, size: '10%' },
                labels: { position: 'outside', interval: 20 },
                pointer: { style: { fill: '#2e79bb' }, width: 5 },
                animationDuration: 1500
            };

            // slider's settings.
            $scope.sliderSettings = { min: 0, max: 220, mode: 'fixed', ticksFrequency: 20, width: 150, value: 120, showButtons: false };

            // gauge and slider value.
            $scope.value = 0;
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <div style="position: relative; height: 380px;">
            <jqx-gauge ng-model="value" jqx-settings="gaugeSettings" style="position: absolute; top: 0px; left: 0px;"></jqx-gauge>
            <br />
            <jqx-slider ng-model="value" jqx-settings="sliderSettings" style="position: absolute; top: 250px; left: 93px"></jqx-slider>
        </div>
    </div>
</body>
</html>
